<template>
  <div class="banner-header">
    <router-link v-show="!showHeader" tag="div" to="/" class="banner-header-back iconfont icon-back"></router-link>
    <div v-show="showHeader" class="banner-header-fixed" :style="opacityStyle">
      <i class="iconfont icon-back"></i>
      景点详情</div>
  </div>
</template>

<script>
export default {
  name: 'DetailHeader',
  data () {
    return {
      showHeader: false,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  methods: {
    handleScroll () {
      const top = document.documentElement.scrollTop
      if (top > 60) {
        let opacity = top / 140
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = {
          opacity
        }
        this.showHeader = true
      } else {
        this.opacityStyle = {
          opacity: 1
        }
        this.showHeader = false
      }
      console.log(document.documentElement.scrollTop)
    }
  },
  activated () {
    window.addEventListener('scroll', this.handleScroll)
  },
  deactivated () {
    // 全局事件的解绑
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
@import "~css/variable.styl"
  .banner-header
    position absolute
    top 0
    width 6.4rem
    margin 0 auto
    z-index 100
    &-back
      position absolute
      top .2rem
      left .2rem
      width .5rem
      height .5rem
      border-radius 50%
      background rgba(0,0,0,.7)
      &::before
        display block
        font-size .3rem
        color #fff
        height .5rem
        width .5rem
        line-height .5rem
        text-align center
    &-fixed
      position fixed
      top 0
      width 6.4rem
      margin 0 auto
      overflow hidden
      height .86rem
      line-height .86rem
      color #fff
      text-align center
      background $headerBGC
      i
        position absolute
        top 0
        left 0
        width .46rem
        height .46rem
        margin-top .2rem
        font-size .3rem
        &::before
          display block
          width .46rem
          height .46rem
          line-height .46rem
</style>
